From 3c7fd3e677b64d3f810e9ed664abed95952f0466 Mon Sep 17 00:00:00 2001 From: Moriel Schottlender Date: Wed, 19 Apr 2017 14:47:43 -0700 Subject: [PATCH] RCFilters UI: Unify li bullets with and without highlights Make sure that the placement of the texts under the bullets is the same whether the highlight is on or off. Otherwise, the list is shifting a bit to the right to make room for highlight 'bullets' when we press the highlight key. Bonus: Make sure the highlight container is only appended to each bullet once, even if the process is called for more than once on the same content. Bug: T163275 Bug: T163387 Change-Id: I4c2cf6176d5129dd2bc37d2f58ed84e85aca8560 --- .../styles/mw.rcfilters.ui.ChangesListWrapperWidget.less | 9 ++++++--- .../ui/mw.rcfilters.ui.ChangesListWrapperWidget.js | 5 +++++ 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less index 402f0ad6ad..3337a03736 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less @@ -12,12 +12,15 @@ } } + ul { + // Each li's margin-left should be the width of the highlights + // element + the margin + margin-left: ~'calc( ( @{result-circle-diameter} + @{result-circle-margin} ) * 5 + @{result-circle-general-margin} )'; + } + &-highlighted { ul { list-style: none; - // Each li's margin-left should be the width of the highlights - // element + the margin - margin-left: ~'calc( ( @{result-circle-diameter} + @{result-circle-margin} ) * 5 + @{result-circle-general-margin} )'; li { list-style: none; diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js index c7e6961a7a..f4a1807494 100644 --- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js +++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js @@ -148,6 +148,11 @@ .prop( 'data-color', 'none' ) ); + if ( $( '.mw-rcfilters-ui-changesListWrapperWidget-highlights' ).length ) { + // Already set up + return; + } + mw.rcfilters.HighlightColors.forEach( function ( color ) { $highlights.append( $( '
' ) -- 2.20.1